<template>
  <div class="fdasfa" style="background: #f5f6fa">
    <Back />
    <div class="header">
      <div class="main">
        <img :src=" this.img" alt="" />
        <ul>
          <li>
            <p>已经打卡{{ n }}天</p>
            <el-button :plain="true" @click="this.cLock" v-if="!isShow"
              >立即打卡</el-button
            >
            <el-button :plain="true" @click="this.noclock" v-if="isShow"
              >今天已经打完卡了</el-button
            >
          </li>
          <li><p class="bot">坚持每天连续打卡可以获多重奖励哦</p></li>
        </ul>
      </div>
    </div>
    <div class="bmain">
      <h2>连续打卡领好礼</h2>
      <div class="bbmain">
        <div
          class="wk"
          v-for="item in 6"
          :key="item"
          :class="{ cc: item <= n }"
        >
          <i class="el-icon-circle-check"></i>
          <p>第{{ item }}天</p>
        </div>
        <div class="dk" :class="{ ee: n >= 7 }">
          <img src="../../../img/u4822.gif" alt="" />
          <p>第7天</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getClock } from "../../../api";
import { getList } from "../../../api";
export default {
  data() {
    return {
      // url:"http://192.168.10.32/cuihe/img/",
      list: [],
      n: 0,
      isShow: false,
      id: 1,
      img: this.$store.state.userImg,
      group: "",
    };
  },
  created() {
    this.id = this.$store.state.id
    // this.img = this.$route.query.list.img;

    getList({
      userId: this.id,
    }).then((res) => {
      this.list = res.data.data.list;
      this.isShow = res.data.data.state;
      this.n = this.list.length;
    });
  },

  methods: {
    cLock() {
      getClock({
        userId: this.id,
      }).then((res) => {
        // ./img
        getList({
          userId: this.id,
        }).then((res) => {
          this.list = res.data.data.list;
          this.isShow = res.data.data.state;

          this.n = this.list.length;
        });
      });
    },
    noclock() {
      this.$toast({
        message:"今天已经打过卡了哦！",
        icon:'fail',
        duration:1000
      })
    },
  },
};
</script>

<style>
  .van-toast{
    width: 17vh;
    height: 17vh;
}
.van-toast__icon{
    font-size: 18vw;
}
.van-toast__text{
    font-size: 3vw;
}
</style>
<style scoped>

.fdasfa{
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
}
.el-icon-circle-check {
  font-size: 10vw;
  font-weight: 900;
  color: #fff;
}
.wk i {
  display: block;
  display: flex;
  justify-content: center;
  align-items: center;

  margin: 0 auto;
  margin-top: 7vw;
  margin-bottom: 3vw;
}
.wk p {
  width: 100%;
  font-size: 3vw;
  line-height: 5vw;
  text-align: center;
  background: #d5e9ff;
  color: #818af4;
}
.wk {
  width: 17vw;
  height: 25vw;
  display: flex;
  flex-direction: column;
  background: #ebf4fc;
}
.dk {
  width: 37vw;
  height: 20vw;
  display: flex;
  flex-direction: column;
  background: #ebf4fc;
  justify-content: space-between;
}
.dk img {
  height: 20vw;
}
.dk p {
  font-size: 3vw;
  line-height: 5vw;
  text-align: center;
  background: #d5e9ff;
  color: #818af4;
  margin-top: 0vw;
}
.ee {
  background: darksalmon;
}
.ee p {
  width: 100%;
  background: #f2f2f2;
  color: #a599a5;
}
.cc {
  background: #6d8aff;
}
.cc p {
  width: 100%;
  background: #f2f2f2;
  color: #a599a5;
  width: 17vw;
}
h2 {
  line-height: 15vw;
  font-size: 3.5vw;
  text-indent: 2rem;
}
.bmain {
  position: relative;
  top: -15vw;
  border-radius: 3vw;
  width: 90%;
  background: #fff;
  margin: 0 auto;
}
.bbmain {
  width: 90%;
  background: #fff;
  height: 65vw;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  margin: 0 auto;
}
.header {
  width: 100%;
  height: 50vw;
  background: #3c435c;
  margin-top: 10vw;
}
.main {
  width: 100%;
  height: 40vw;
  background: #3c435c;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header img {
  line-height: 10vw;
  width: 17vw;
  height: 17vw;
  margin-left: 5vw;
  border-radius: 50%;
}
.header ul {
  width: 70vw;
  height: 17vw;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
li {
  list-style: none;
  display: flex;
  flex-direction: row;
  font-size: 4vw;
  align-items: center;
}
.over {
  background: #ccc;
}
button {
  width: 28vw;
  height: 8vw;
  margin-left: 8vw;
  border-radius: 5vw;
  font-size: 3vw;
  text-align: center;
}
p {
  color: #fff;
}
.bot {
  font-size: 3.5vw;
}
.el-icon-arrow-down[data-v-5481e597] {
  top: 0;
  left: 0;
}
</style>